<template>
  <div class="ftable_frame">
    <el-table
      :data="tableData"
      @current-change="handleCurrentChange"
      highlight-current-row
      style="width: 100%"
      height="100%"
    >
      <el-table-column label="文件名">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.data.fileName"
            @keydown.native.enter="saveFile"
            @blur="saveFile"
            v-show="scope.row.data.isShow"
            :ref="scope.row.data.fileId"
            size="mini"
            clearable
          />
          <span v-show="!scope.row.data.isShow">{{
            scope.row.data.fileName
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          <el-tag
            size="medium"
            :type="scope.row.data.fileType == '文件夹' ? 'primary' : 'success'"
            >{{ scope.row.data.fileType }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" :width="180">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="handleClick(scope.row.data)"
            size="mini"
          >
            打开
          </el-button>
          <Dropdown
            style="margin-left: 20px"
            trigger="click"
            @on-click="handleClick_drop"
          >
            <el-button size="mini"> 更多 </el-button>
            <DropdownMenu slot="list">
              <DropdownItem
                v-for="v in ItemOption.options"
                :key="v.value"
                :name="v.value"
                >{{ v.label }}</DropdownItem
              >
            </DropdownMenu>
          </Dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "FolderTable",
  data() {
    return {
      ItemOption: {
        id: 1,
        options: [
          { value: 1, label: "重命名" },
          { value: 2, label: "复制" },
          { value: 3, label: "剪切" },
          { value: 4, label: "删除" },
        ],
        selected: "更多操作",
        offset: 0,
        span: 2,
      },
      file_selected: null,
      is_use: false,
    };
  },
  props: {
    node: {
      type: Object,
      required: true,
    },
    process: {
      type: Object,
      required: true,
    },
  },
  methods: {
    ...mapActions("appAbout", ["openApp", "openAppWithData"]),
    handleClick(file) {
      //console.log(file.fileType)
      // 根据文件类型进行分别的处理
      switch (file.fileType) {
        case "文件":
          // 之后做类型和打开应用的映射
          this.openAppWithData({ app_id: "text-editor", meta: { file } });
          break;
        default:
        // nothing pear
      }
    },
    handleClick_drop(v) {
      if (this.file_selected == null) {
        return;
      }
      switch (v) {
        case 1:
          this.file_selected.isShow = true;
          this.$nextTick(() => {
            const vc = this.$refs[this.file_selected.fileId];
            // 获得焦点
            vc.focus();
            // 选中所有
            vc.select();
          });
          break;
        case 4:
          // 删除文件到垃圾站
          this.deleteFile();
        default:
        // nothing
      }
    },
    handleCurrentChange(v) {
      if (v == null) {
        this.file_selected = null;
        return;
      }
      this.file_selected = v.data;
    },
    saveFile(v) {
      if (this.is_use) return;
      this.is_use = true;
      v = v.srcElement.value;
      this.file_selected.isShow = false;
      // 进行提交
      const id = this.file_selected.fileId;
      this.$basicAxios(this.$ms.saveFileNameById(id, v, this.token)).then(()=>{
        this.is_use = false;
      },()=>{this.is_use = false;})
    },
    deleteFile() {
      // 判断当前的文件类型
      const fileType = this.file_selected.fileType;
      if (fileType == "文件") {
        this.delete_file();
      } else {
        this.delete_dir();
      }
    },
    delete_file() {
      const fileId = this.file_selected.fileId;
      // 前端提前删除 防止出现网络问题
      if (this.file_selected.fileFaId == this.user.userId) {
        // 桌面同步
        this.$pubsub.publish("delete_desk_file", this.file_selected);
      }
      this.$pubsub.publish(
        `deleteNode:${this.process.process_id}`,
        this.file_selected
      );
      this.$basicAxios(this.$ms.delete_file(fileId, this.token))
    },
    delete_dir() {
      const fileId = this.file_selected.fileId;
      // 前端提前删除 防止出现网络问题
      if (this.file_selected.fileFaId == this.user.userId) {
        // 桌面同步
        this.$pubsub.publish("delete_desk_file", this.file_selected);
      }
      this.$pubsub.publish(
        `deleteNode:${this.process.process_id}`,
        this.file_selected
      );
      this.$basicAxios( this.$ms.delete_dir(fileId, this.token))
    },
  },
  computed: {
    ...mapState("userAbout", ["token", "user"]),
    tableData() {
      return this.node.childNodes;
    },
  },
};
</script>

<style scoped lang="less">
.ftable_frame {
  width: 100%;
  height: 100%;
}
/deep/.el-table__body-wrapper {
  height: 80%;
}
/deep/.el-table {
  height: 100%;
}
/deep/.el-table thead {
  height: 100%;
}
/deep/.el-table__header-wrapper {
  height: 20%;
}
</style>